Android UI デザイナーに朗報！Draw 9-path Tool がかなり使いやすくなった！

SDK Tools Revision 22 から Draw 9-patch Tool がかなり使いやすくなった！

http://developer.android.com/tools/sdk/tools-notes.html

Updated draw9patch tool to allow easier changing of markers.

SDK Tools Revision 22 から Draw 9-patch Tool が Android Studio (もしくは Eclipse) から起動できるようになり、ツールの使いかた自体もかなり使いやすくなりました！ということで新しい使いかたのメモです。本記事では Android Studio から使う方法を解説していますが Eclipse からもツール直接起動でも同じ使いかたになります。

9-patch リソースの作成

9-patch リソースを作るにはファイル名を ファイル名.9.png という形式にする必要があるのでまずファイル名を変更します。Android Studio の場合、ディレクトリにコピーした時点でファイル名を変更するダイアログが表示されるので、ここで変更して保存すると楽です。

あとはファイルをダブルクリックすると Draw 9-path Tool が起動します！

9-patch をあてる

ではツールを使ってみましょう。まずは編集画面の画像の上のほうにカーソルを持っていきます。ピクセルの座標を表示してくれるので、この状態でまずはクリックします。

おお。一気に横一直線に線が引かれました！あとはこうして引かれた線の両端をドラッグで左右に調整していきます。

パッチの枠の欄外でも線が引けるところが以前までと比べて相当使いやすいです。イライラ棒みたいに線を引く必要がなくなりましたよ！
2箇所目移行は線を引きたい地点からドラッグすると線を追加することができます。

また、削除は今までと同様 Shift を押しながら消したい線をドラッグです。消す範囲の開始は枠内をクリックする必要がありますが、消す範囲のドラッグは枠外でもできるので使いやすいです。
こんな感じに作ってみました。

レイアウトに当ててみました。問題ないですね！

[参考] Simple Nine-patch Generator も使いたい

Android Asset Studio には Simple Nine-patch Generator というツールが公開されているので Web ブラウザから 9-patch を作成することができます。

Simple Nine-patch Generator | Android Asset Studio

開発環境を要することなく使えるので、デザイナーのかたはこっちのほうが作りやすいでしょうか。ただ現在は xhdpi のリソースまでしか作成できないので xxhdpi 用のリソースを作ることはできないところだけ注意してくださいね。あ、これって1箇所以上線引けないんですかね？

まとめ

使いやすさが伝わったでしょうか？ｗ 9-patch を作るのがとっても簡単になって本当に良かったです。もう Photoshop で作る必要もないですね！